Confirm?

Are you sure you want to proceed?
S
Seyyed Reza Qomi Behbahani

Modern, Mobile-Friendly Links Page Design

Clone & Customize via AI

A compact links manager page that lists shortened URLs with search, selection, tags, and action buttons. Built as a Blazor Links Page using Tailwind layout and InputText search.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Card-based list of shortened links with title, short URL, long URL, favicon and tags. - Search input for client-side filtering (InputText). - Row selection via InputCheckbox and a selection toolbar with bulk actions (export, hide, tag). - Per-item actions: copy, share, edit and secondary menu icons. - Simple mock data initialization via OnInitialized. ## Key components - Blazor components: InputText, InputCheckbox, EventCallback, [Parameter]. - Reusable LinkCard component rendering LinkModel data. - Plain C# model: LinkModel with computed FaviconUrl. ## How it works - Data binding uses @bind-Value on InputText and InputCheckbox and passes selection changes via EventCallback<bool> from LinkCard to parent. - Selection state is tracked with selectAll and selectedCount; HandleLinkSelection increments/decrements selectedCount based on callbacks. - Actions (CopyLink, ShareLink, EditLink) are stubs in the component and expect JavaScript interop or navigation wiring. - Links are rendered with foreach over a list of LinkModel instances seeded in OnInitialized. ## Styling - Layout and styles use Tailwind utility classes (flex, gap-*, px-*, text-*, bg-gray-*, rounded-md) for spacing and responsiveness. - Iconography relies on Font Awesome classes (fas fa-*) included in markup; no theme provider is used. - Cards and toolbar use responsive patterns (sm:flex-row, truncate) for narrow screens. ## Reuse steps 1. Add a Blazor project (server or WebAssembly) and include Tailwind CSS and Font Awesome in the layout. 2. Copy LinkModel.cs and LinkCard.razor and LinksPage.razor into the project and import any necessary namespaces. 3. Replace mock data in OnInitialized with an injected service or API call (register service in Program.cs). 4. Implement action methods: copy/share via JS interop (IJSRuntime), edit via NavigationManager or dialog component. 5. Optionally add filtering/sorting and persistence for selection state. ## Limitations & next steps - This is a single-page UI generated by Instruct UI and focuses on front-end structure; it does not include data persistence, authentication, or API wiring. - Selection logic is basic (selectedCount increment/decrement) and needs improvement for selectAll, deselect, and idempotency. - Add server integration, pagination, accessibility attributes, and unit tests for components to complete production wiring.